Unsupported indicator does not meet accessibility criteria

[romainmenke]

Summary

Unsupported indicator does not meet accessibility criteria

On smaller screens there is only an orange outline and no icon.
On larger screens there is an orange outline and an icon but no textual information.
The icon isn't part of the accessibility tree and won't be announced by screen readers.

In no case is there any explanation what any of this means.
Users have to guess that this has to do with browser support status.

Instead I would expect:

• information in text
• everything is part of the accessibility tree
• not using color alone to convey meaning on smaller screens

URL

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#try_it

Reproduction steps

1. I set hyphen: unsupported in the demo
2. I see the "this feature is unsupported" indication

Expected behavior

I expected this feature to have text information and to be accessible

Actual behavior

Feature is not accessible and doesn't explain itself

Device

Other (specify below)

Browser

Other (specify below)

Browser version

Other version (specify below)

Operating system

Other (specify below)

Screenshot

On smaller screens:

On larger screens:

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.